<template>
    <div v-loading="loading" class="container">
        <!-- 轮播图 -->
        <Carousel />
        <!-- 首页搜索 -->
        <Search />
        <!-- 展示医院的结构 -->
        <el-row :gutter="16">
            <el-col :lg="20">
                <!-- 等级子组件 -->
                <Level @getLevel="getLevel" />
                <!-- 地区子组件 -->
                <Region @getRegion="getRegion" />
                <!-- 医院子组件 -->
                <div class="hospital">
                    <div class="hospital_div" v-if="hsaHospitalArr.length">
                        <CardHospital class="home_cardHospital" v-for="item in hsaHospitalArr" :key="item.id"
                            :hospitalInfo="item" />
                    </div>
                    <el-empty v-else description="暂时没有数据" />
                </div>
                <!-- 分页器 -->
                <el-pagination class="pagination" v-model:current-page="pageNo" v-model:page-size="pageSize"
                    :page-sizes="[8, 16, 24, 32]" layout="prev, pager, next, jumper, ->, sizes, total" :total="total"
                    @size-change="handleSizeChange" @current-change="getHospitalInfo" />
            </el-col>
            <el-col class="container_static" :lg="4">
                <Tip />
            </el-col>
        </el-row>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { reqHospital } from '@/api/home'
import Carousel from './components/carousel/index.vue'
import Search from './components/search/index.vue'
import Level from './components/level/index.vue'
import Region from './components/region/index.vue'
import CardHospital from './components/cardHospital/index.vue'
import Tip from './components/tip/index.vue'
import type { Content, HospitalResponseData } from '@/api/home/type'
let pageNo = ref<number>(1)
let pageSize = ref<number>(8)
let total = ref<number>(0)
// 存储已有的医院的数据
let hsaHospitalArr = ref<Content>([]);
// 判断数据是否全部请求完毕
let loading = ref<boolean>(true);
// 存储医院的等级相应数据
let hostype = ref<string>('');
// 存储医院的地区
let districtCode = ref<string>('');

onMounted(() => {
    getHospitalInfo();
});
// 获取已有的医院的数据
const getHospitalInfo = async (pager = 1) => {
    loading.value = await true
    pageNo.value = pager
    let { code, data: { content, totalElements } }: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value)
    if (code === 200) {
        hsaHospitalArr.value = content
        total.value = totalElements
    }
    loading.value = await false
}

// 分页器下拉菜单发生变化的时候会触发
const handleSizeChange = () => {
    getHospitalInfo()
}

// 子组件自定义事件:获取儿子给父组件传递过来的等级参数
const getLevel = (level: string) => {
    hostype.value = level
    getHospitalInfo()
}
// 子组件自定义事件:获取儿子给父组件传递过来的等级参数
const getRegion = (region: string) => {
    districtCode.value = region
    getHospitalInfo()
}
</script>
<style scoped lang="scss">
.hospital {
    min-height: 400px;

    .hospital_div {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .home_cardHospital {
            width: 49%;
            margin-bottom: 16px;
        }
    }

}

.pagination {
    margin-bottom: 16px;
}

@media (max-width:1199px) {
    :deep(.el-pagination) {
        .el-pagination__jump {
            display: none;
        }

        .el-pagination__sizes {
            display: none;
        }
    }

    .container_static {
        display: none;
    }

    .pagination {
        margin-bottom: 10px !important;
    }
}

@media (max-width:768px) {
    :deep(.el-pagination) {
        display: flex;
        justify-content: center;

        .el-pagination__jump {
            display: none;
        }

        .el-pagination__rightwrapper {
            display: none;
        }
    }

    .hospital {
        .hospital_div {
            margin-top: 0px;

            .home_cardHospital {
                width: 100%;
                margin-bottom: 10px;
            }
        }
    }

    .pagination {
        margin-bottom: 0 !important;
    }
}
</style>

  